<template>
  <div id="top-title">
    <div class="txt-title">{{title}}</div>
  </div>
</template>
<script>

export default {
  name: 'TopTitle',
  watch:{
    sysConfig:{
      handler(o,n) {
        if (!!this.sysConfig){
          this.changeTitle(this.sysConfig);
/*          const locale = this.$store.state.app.local;
          if (locale === 'en-US' && !!this.sysConfig.CUSTOMER_TITLE_ES){
            this.title = this.sysConfig.CUSTOMER_TITLE_ES;
          }else if (!!this.sysConfig.CUSTOMER_TITLE){
            this.title = this.sysConfig.CUSTOMER_TITLE;
          }*/
        }
      }
    }
  },
  computed:{
    sysConfig(){
/*      if (!!this.$store.getters.sysConfig){
        if (!!this.$store.getters.sysConfig.CUSTOMER_TITLE){
          this.title = this.$store.getters.sysConfig.CUSTOMER_TITLE
        }
      }*/
      const sc = this.$store.getters.sysConfig
      this.changeTitle(sc);
      return this.$store.getters.sysConfig;
    },
  },
  data(){
    return{
      title: "",
    }
  },
  methods:{
    changeTitle(sc){
      const locale = this.$store.state.app.local;
      console.log("TopTitle.changeTitle locale=%o,sysConfig=%o",locale,sc)
      if (locale === 'en-US' && !!sc.CUSTOMER_TITLE_ES){
        this.title = sc.CUSTOMER_TITLE_ES;
      }else if (!!sc.CUSTOMER_TITLE){
        this.title = sc.CUSTOMER_TITLE;
      }


    }
  }


}
</script>
<style lang="less">
#top-title {
  position: relative;
  width: 100%;
  height: 150px;
  display: flex;
  justify-content: center;//space-between,;
  align-items: center;
  flex-shrink: 0;
  //border: 1px solid #14edc5;
  background: url("./img/title.png");
  background-size:100% 100%;
  .txt-title{
    //margin-top: 70px;
    color: #FFFFFF;
    font-size: 36px;

  }

}
</style>
